<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>

<body>
    <!-- 页面内容 -->
    <h2>自定义指令</h2>

    <component id="root">
        <h2>n的值为：{{n}}</h2>
        <button @click="add">点我n+1</button>
         <button @click="bye">销毁</button>
        <div>{{n}}</div>
    </component>
</body>

<script src="../script/vue.js"></script>

<script>
    Vue.config.devtools = true;

    let vue = new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        methods: {
          add(){
            this.n++ // 触发更新
            console.log('add')
          },
          bye() {
            console.log('bye'); // 销毁前
                // 销毁组件实例，同时会触发组件的beforeDestroy和destroyed钩子函数
                // 组件实例销毁后，所有的事件监听和子实例也会被自动销毁
                this.$destroy();
            }
        },
        beforeCreate() {
          console.log('1.beforeCreate'); // 实例创建前
        },
        created() {
          console.log('2.created'); // 实例创建后
        },
        beforeMount() {
          console.log('3.beforeMount'); // 实例挂载前
        },
        mounted() {
          console.log('4.mounted'); // 实例挂载后
        },
        beforeUpdate() {
          console.log('5.beforeUpdate'); // 实例更新前
        },
        updated() {
            console.log('6.更新')
        },
        beforeDestroy() { 
            console.log('7.beforeDestroy'); // 实例销毁前
            this.n = 99;
        },
        destroyed() {
            console.log('8.destroyed'); // 实例销毁后
        }
  
    })
</script>

</html>